@charset"UTF-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
html{
    font-size: 40px;
}
.web{
    width: 100%;
    height: 100%;
    >.top{
        border-bottom: 3px solid black;
        >ul{
            height: r(75);
            width: 100%;
            display: flex;
            padding-left: r(131);
            padding-right: r(131);
            display: flex;
            justify-content: space-between;
            align-items: center;
            >li{
                >a{
                    font-size: r(30);
                }
            }
            
        }
    }
    >.content{
        width: 100%;
        height: 100%;
        overflow: auto;
        >.first{
            width: 100%;
            >ul{
                >li:first-of-type{
                    height: r(159);
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: url(../img/tonggao1.jpg) no-repeat;
                    background-size: contain;
                    margin-bottom:r(3) ;
                    >p{
                        font-size: r(30);
                        color: white;
                    }
                }
                >li:last-of-type{
                    height: r(268);
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    >.zuo{
                        display: inline-block;
                        vertical-align: top;
                        >.shang{
                            width: r(286);
                            height: r(135);
                            background: url(../img/tonggao2.jpg) no-repeat;
                            background-size: contain;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: r(3);
                            >p{
                                font-size: r(30);
                                color: white;
                            }
                        }
                        >.xia{
                            width: r(286);
                            height: r(135);
                            background: url(../img/tonggao3.jpg) no-repeat;
                            background-size: contain;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            >p{
                                font-size: r(30);
                                color: white;
                            }
                        }
                    }
                    >.you{
                        display: inline-block;
                        vertical-align: top;
                        >div{
                          height: r(268);
                        width: r(351);
                        background: url(../img/tonggao4.jpg) no-repeat;
                        background-size: contain;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        >p{
                            font-size: r(30);
                            color: white;
                        }  
                        }
                        
                    }
                }
                
            }
        }
        >.second{
            width: 100%;
            >ul{
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 100%;
                height: r(150);
                >li{
                    >a{
                        >img{
                            height: r(75);
                            width: r(75);
                            margin-bottom: r(8);
                        }
                        >p{
                            font-size: r(20);
                            color: #343434;
                            text-align: center;
                        }
                        
                    }
                }
            }
        }
        >.third{
            width: 100%;
            >.title{
                width: 100%;
                >ul{
                    height: r(60);
                    background: #f2f2f2;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    >li{
                        >span{
                            display: inline-block;
                            vertical-align: middle;
                            font-size: r(20);
                            color: #343434;
                        }
                        >img{
                            display: inline-block;
                            vertical-align: middle;
                            height: r(8);
                            width: r(16);
                        }
                    }
                }
            }
            >.picture{
                width: 100%;
                >ul{
                    width: 100%;
                    >li:first-of-type{
                        padding-bottom: r(50);
                        padding-top: r(30);
                        height: r(300);
                        width: 100%;
                        background: url(../img/tonggao9.jpg) no-repeat;
                        background-size: contain;
                        position: relative;
                        >div:first-of-type{
                            position: absolute;
                            text-align: center;
                            width: r(96);
                            height: r(38);
                            color: white;
                            background: black;
                            opacity: 0.45;
                            font-size: r(24);
                            top: 0;
                            right: 0;
                        }
                        >div:nth-of-type(2){
                            position: absolute;
                            width: 100%;
                            bottom: r(9);
                            text-align: center;
                            color: white;
                            font-size: r(18);
                        }
                        >div:nth-of-type(3){
                            display: inline-block;
                            margin-left: r(256);
                            vertical-align: top;
                            text-align: center;
                            width: r(53);
                            height: r(28);
                            color: white;
                            font-size: r(16);
                            border-radius: 10px;
                            margin-right: r(10);
                            border: solid 1px #ffffff;
                            margin-bottom: r(11);
                        }
                        >div:nth-of-type(4){
                            display: inline-block;
                            vertical-align: top;
                            text-align: center;
                            width: r(53);
                            height: r(28);
                            color: white;
                            font-size: r(16);
                            border-radius: 10px;
                            border: solid 1px #ffffff;
                        }
                        >div:nth-of-type(5){
                            color: white;
                            font-size: r(30);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(16);
                        }
                        >div:nth-of-type(6){
                            color: white;
                            font-size: r(20);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(13);
                        }
                        >div:nth-of-type(7){
                            color: white;
                            font-size: r(20);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(20);
                        }
                        >div:nth-of-type(8){
                            width:r(194);
                            height: r(45);
                            text-align: center;
                            line-height: r(45);
                            background-color: #000000;
                            border-radius: 5px;
                            opacity: 0.17;
                            color: white;
                            font-size: r(28);
                            margin: 0 auto;
                        }
                    }
                    >li:nth-of-type(2){
                        padding-bottom: r(50);
                        padding-top: r(30);
                        height: r(300);
                        width: 100%;
                        background: url(../img/tonggao12.jpg) no-repeat;
                        background-size: contain;
                        position: relative;
                        >a{
                            
                        
                        >div:first-of-type{
                            position: absolute;
                            text-align: center;
                            width: r(96);
                            height: r(38);
                            color: white;
                            background: black;
                            opacity: 0.45;
                            font-size: r(24);
                            top: 0;
                            right: 0;
                        }
                        >div:nth-of-type(2){
                            position: absolute;
                            width: 100%;
                            bottom: r(9);
                            text-align: center;
                            color: white;
                            font-size: r(18);
                        }
                        >div:nth-of-type(3){
                            display: inline-block;
                            margin-left: r(256);
                            vertical-align: top;
                            text-align: center;
                            width: r(53);
                            height: r(28);
                            color: white;
                            font-size: r(16);
                            border-radius: 10px;
                            margin-right: r(10);
                            border: solid 1px #ffffff;
                            margin-bottom: r(11);
                        }
                        >div:nth-of-type(4){
                            display: inline-block;
                            vertical-align: top;
                            text-align: center;
                            width: r(53);
                            height: r(28);
                            color: white;
                            font-size: r(16);
                            border-radius: 10px;
                            border: solid 1px #ffffff;
                        }
                        >div:nth-of-type(5){
                            color: white;
                            font-size: r(30);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(16);
                        }
                        >div:nth-of-type(6){
                            color: white;
                            font-size: r(20);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(13);
                        }
                        >div:nth-of-type(7){
                            color: white;
                            font-size: r(20);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(20);
                        }
                        >div:nth-of-type(8){
                            width:r(194);
                            height: r(45);
                            text-align: center;
                            line-height: r(45);
                            background-color: #000000;
                            border-radius: 5px;
                            opacity: 0.17;
                            color: white;
                            font-size: r(28);
                            margin: 0 auto;
                        }
                        }
                    }
                    >li:nth-of-type(3){
                        padding-bottom: r(50);
                        padding-top: r(30);
                        height: r(300);
                        width: 100%;
                        background: url(../img/tonggao11.jpg) no-repeat;
                        background-size: contain;
                        position: relative;
                        >div:first-of-type{
                            position: absolute;
                            text-align: center;
                            width: r(96);
                            height: r(38);
                            color: white;
                            background: black;
                            opacity: 0.45;
                            font-size: r(24);
                            top: 0;
                            right: 0;
                        }
                        >div:nth-of-type(2){
                            position: absolute;
                            width: 100%;
                            bottom: r(9);
                            text-align: center;
                            color: white;
                            font-size: r(18);
                        }
                        >div:nth-of-type(3){
                            display: inline-block;
                            margin-left: r(256);
                            vertical-align: top;
                            text-align: center;
                            width: r(53);
                            height: r(28);
                            color: white;
                            font-size: r(16);
                            border-radius: 10px;
                            margin-right: r(10);
                            border: solid 1px #ffffff;
                            margin-bottom: r(11);
                        }
                        >div:nth-of-type(4){
                            display: inline-block;
                            vertical-align: top;
                            text-align: center;
                            width: r(53);
                            height: r(28);
                            color: white;
                            font-size: r(16);
                            border-radius: 10px;
                            border: solid 1px #ffffff;
                        }
                        >div:nth-of-type(5){
                            color: white;
                            font-size: r(30);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(16);
                        }
                        >div:nth-of-type(6){
                            color: white;
                            font-size: r(20);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(13);
                        }
                        >div:nth-of-type(7){
                            color: white;
                            font-size: r(20);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(20);
                        }
                        >div:nth-of-type(8){
                            width:r(194);
                            height: r(45);
                            text-align: center;
                            line-height: r(45);
                            background-color: #000000;
                            border-radius: 5px;
                            opacity: 0.17;
                            color: white;
                            font-size: r(28);
                            margin: 0 auto;
                        }
                    }
                    >li:nth-of-type(4){
                        padding-bottom: r(50);
                        padding-top: r(30);
                        height: r(300);
                        width: 100%;
                        background: url(../img/tonggao10.jpg) no-repeat;
                        background-size: contain;
                        position: relative;
                        >div:first-of-type{
                            position: absolute;
                            text-align: center;
                            width: r(96);
                            height: r(38);
                            color: white;
                            background: black;
                            opacity: 0.45;
                            font-size: r(24);
                            top: 0;
                            right: 0;
                        }
                        >div:nth-of-type(2){
                            position: absolute;
                            width: 100%;
                            bottom: r(9);
                            text-align: center;
                            color: white;
                            font-size: r(18);
                        }
                        >div:nth-of-type(3){
                            display: inline-block;
                            margin-left: r(256);
                            vertical-align: top;
                            text-align: center;
                            width: r(53);
                            height: r(28);
                            color: white;
                            font-size: r(16);
                            border-radius: 10px;
                            margin-right: r(10);
                            border: solid 1px #ffffff;
                            margin-bottom: r(11);
                        }
                        >div:nth-of-type(4){
                            display: inline-block;
                            vertical-align: top;
                            text-align: center;
                            width: r(53);
                            height: r(28);
                            color: white;
                            font-size: r(16);
                            border-radius: 10px;
                            border: solid 1px #ffffff;
                        }
                        >div:nth-of-type(5){
                            color: white;
                            font-size: r(30);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(16);
                        }
                        >div:nth-of-type(6){
                            color: white;
                            font-size: r(20);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(13);
                        }
                        >div:nth-of-type(7){
                            color: white;
                            font-size: r(20);
                            width: 100%;
                            text-align: center;
                            margin-bottom: r(20);
                        }
                        >div:nth-of-type(8){
                            width:r(194);
                            height: r(45);
                            text-align: center;
                            line-height: r(45);
                            background-color: #000000;
                            border-radius: 5px;
                            opacity: 0.17;
                            color: white;
                            font-size: r(28);
                            margin: 0 auto;
                        }
                    }
                }
            }
        }
    }
}
